<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>YUI History Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.4.1/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.1/build/event/event-min.js"></script>

<!-- Browser History Manager source file -->
<script src="http://yui.yahooapis.com/2.4.1/build/history/history-min.js"></script>
<style type="text/css">
<!--
#yui-history-iframe { 
  position:absolute; 
  top:0; left:0; 
  width:1px; height:1px; 
  visibility:hidden; 
} 
-->
</style>
</head>
<body>
<iframe id="yui-history-iframe" src="./blank.html"></iframe> 
<input id="yui-history-field" type="hidden">
<script>
(function () {
  var myModuleBookmarkedState = YAHOO.util.History.getBookmarkedState("myModule");
  // If there is no bookmarked state, assign the default state:
  var myModuleInitialState = myModuleBookmarkedState || "myModuleDefaultState";
  function myModuleStateChangeHandler (state) {
    // Update the UI of your module according to the "state" parameter
    document.getElementById("msg").innerHTML = state;
  }
  YAHOO.util.History.register("myModule", myModuleInitialState, myModuleStateChangeHandler);
  YAHOO.util.History.onReady(function () {
    var myModuleCurrentState = YAHOO.util.History.getCurrentState("myModule");
    // Update the UI of your module according to "myModuleCurrentState"
  });
  try {
    YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
  } catch (e) {
    document.getElementById("msg").innerHTML = "Sorry, your browser(maybe Opera?) is not supported";
  };

})();
</script>
<div id="msg"></div>
<a onclick="YAHOO.util.History.navigate('myModule', 'myModuleNewState1')" href="javascript:void(0)">page 1</a>
<a onclick="YAHOO.util.History.navigate('myModule', 'myModuleNewState2')" href="javascript:void(0)">page 2</a>
<a onclick="YAHOO.util.History.navigate('myModule', 'myModuleNewState3')" href="javascript:void(0)">page 3</a>
<br>
Watch out the back/forward button!
</body>
</html>
